<template>
  <div>
    <header>
      <p class="fanhui" @click="Return">返回</p>
      <p class="lan">商品</p>
      <p>评价</p>
    </header>
    <main>
      <!-- 主要内容左边部分 -->
      <div class="mainleft">
        <div
          :class="[indexx == index ? 'blue' : 'left-nr']"
          v-for="(value, index) in arr"
          :key="index"
          @click="moveFoodsWrapper(index)"
        >
          {{ value.name }}
        </div>
      </div>
      <!-- 主要内容右边部分 -->
      <div class="mainright" ref="nmmd" @scroll="huadong()">
        <div
          class="right-nr"
          ref="ntmd"
          v-for="(value, index) in arr"
          :key="index"
        >
          <p class="title">
            <span>
              {{ value.name }}
            </span>
            {{ value.description }}
          </p>
          <!-- 右部分内容的下部分 -->
          <div
            class="right-nr-bottom"
            v-for="(item, index) in value.foods"
            :key="index"
          >
            <div class="right-left">
              <img :src="src + item.image_path" alt="" />
            </div>
            <div class="right-right">
              <!-- 标题 -->
              <p class="box-title">
                {{ item.name }}
              </p>
              <!-- 评价 -->
              <p class="box-pingjia">
                {{ item.description }}
              </p>
              <!-- 好评率 -->
              <p class="box-haoping">
                月售 {{ item.month_sales }}份 &nbsp; 好评率{{
                  item.satisfy_rate
                }}%
              </p>
              <!-- 新品判断 -->
              <span
                :style="{ color: '#' + item.icon_color }"
                class="xin"
                v-if="
                  !item.attributes[0] == '' &&
                  item.attributes[0].icon_name == '新'
                "
              >
                {{ item.attributes[0].icon_name }}品
                <b class="xinjiao"> </b>
              </span>
              <!-- 招牌判断 -->
              <span
                :style="{ color: '#' + item.icon_color }"
                class="zhaopai1"
                v-if="
                  !item.attributes[0] == '' &&
                  item.attributes[0].icon_name == '招牌'
                "
              >
                {{ item.attributes[0].icon_name }}
                <b class="xinjiao"> </b>
              </span>
              <!-- 优惠判断 -->
              <p class="youhui" v-if="!item.activity == ''">
                {{ item.activity.image_text }}
              </p>
              <p
                v-show="index == 0"
                class="priec"
                v-for="(items, index) in item.specfoods"
                :key="index"
              >
                ￥
                <!-- 价格 -->
                <span>
                  {{ items.price }}
                </span>
                <span class="tes"> 起 </span>
              </p>
              <!-- 选规格弹窗盒子 -->
              <div class="choose" v-if="bool3">
                <!-- 选规格小盒子 -->
                <div
                  class="choose-small"
                  v-for="(value, index) in guige"
                  :key="index"
                >
                  <p class="ggname">
                    {{ value.name }}
                    <svg
                      @click="xiaoshi"
                      class="img"
                      t="1631436313894"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1624"
                      width="200"
                      height="200"
                    >
                      <path
                        d="M561.17013333 509.06026667L858.02666667 213.73973333c14.03733333-13.968 14.1088-36.60053333 0.1408-50.63786666-13.99893333-14.06826667-36.592-14.10773333-50.62933334-0.1408L510.6048 458.31466667 216.256 163.06986667c-13.9328-13.96693333-36.59733333-14.03733333-50.63466667-0.07146667-14.00426667 13.96586667-14.03733333 36.63146667-0.0704 50.6688l294.27733334 295.1744-296.71466667 295.14026667c-14.0384 13.968-14.1088 36.59733333-0.14293333 50.63786666a35.7216 35.7216 0 0 0 25.3856 10.56c9.13066667 0 18.26666667-3.4688 25.25013333-10.4192l296.78613333-295.2128L807.4304 857.48266667c6.9824 7.02186667 16.15253333 10.53013333 25.35253333 10.53013333a35.72906667 35.72906667 0 0 0 25.28213334-10.45973333c13.99893333-13.96586667 14.03733333-36.592 0.07146666-50.62933334L561.17013333 509.06026667z m0 0"
                        p-id="1625"
                      ></path>
                    </svg>
                  </p>
                  <p class="guigui">规格</p>
                  <div class="guigege">
                    <span
                      :class="[inndex == index ? 'guigefenlei' : 'guigefen']"
                      v-for="(ite, index) in value.specifications[0].values"
                      :key="index"
                      @click="gggg(ite, index)"
                    >
                      <!-- @click="guige(ite, index)" -->
                      {{ ite }}
                    </span>
                  </div>
                  <div class="jiaru">
                    ￥ {{ item.specfoods[0].price }}
                    <span @click="addshopcar(value, index)"> 加入购物车 </span>
                  </div>
                </div>
              </div>
              <!-- 规格判断 -->
              <div
                @click="specification(item)"
                class="guige panduan"
                v-if="!item.specifications[0] == ''"
              >
                选规格
              </div>
              <div v-else class="panduan">
                <transition name="fadee">
                  <span
                    v-show="item.is_featured > 0"
                    class="jian"
                    @click="jian(item, index)"
                    >-</span
                  >
                </transition>
                <span class="jia" @click="jia(item, index)">+</span>

                <transition name="fadee">
                  <span class="zhi" v-show="item.is_featured > 0">{{
                    item.is_featured
                  }}</span>
                </transition>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 购买结算部分 -->
    <div class="shopCar" ref="shopCar" v-if="BOol && n > 0">
      <!-- v-bind="{ marginTop: -1.8 + -lengthshu + 'rem' }" -->
      <div class="carcar">
        <p class="gwc">
          <span> 购物车 </span>
          <span @click="DelectAll">
            <img src="../../assets/ljt.png" alt="" />
            清空</span
          >
        </p>
        <div
          class="shopCar-nr"
          v-for="(value, index) in xingouwuche"
          :key="index"
        >
          <div class="car-small" v-if="value.is_featured > 0">
            <p>
              {{ value.name }}
              <span v-if="!value.specifications[0] == ''">
                {{ value.specifications[0].values }}
              </span>
            </p>
            <div>
              <div class="youbufen">
                <span class="jiaqiann"> ￥{{ value.specfoods[0].price }} </span>
                <span class="jiann" @click="jian(value, index)">-</span>
                <span class="zhii">{{ value.is_featured }}</span>
                <span class="jiaa" @click="jia(value, index)">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 遮罩层部分 -->
    <div class="Mask-layer" v-if="bool2 && n > 0"></div>
    <!-- 尾部部分 -->
    <footer>
      <!-- 购物车 -->
      <div @click="settlement" :class="[n > 0 ? 'teshushi' : 'gouwuche']">
        <img src="../../assets/gouwuche.png" alt="" />
        <div v-show="n > 0" class="red">
          {{ n }}
        </div>
      </div>
      <!-- 价钱计算部分 -->
      <div class="footer-left">
        <p>￥ {{ price }}</p>
        <p class="peisong">配送费￥5</p>
        <p class="qisong" v-if="cha - price > 0">还差￥{{ cha - price }}起送</p>
        <p class="qisong green" v-else>去结算</p>
      </div>
    </footer>
    <div v-if="boool3" class="dw"></div>
  </div>
</template>
<style scoped>
.dw {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1001;
}
.jiaru span {
  float: right;
  width: 1.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #3190e8;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  font-size: 0.2rem;
}
.jiaru {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1rem;
  line-height: 1rem;
  background: rgb(253, 252, 252);
  margin-top: 1rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  color: #f60;
  font-size: 0.4rem;
}
.guigefenlei {
  width: 0.6rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  border: 1px solid #000;
  border-color: #3190e8;
  color: #3190e8;
  float: left;
  margin-right: 0.2rem;
}
.guigefen {
  float: left;
  width: 0.6rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  border: 1px solid #000;
  margin-right: 0.2rem;
}
.guigege {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.guigui {
  font-size: 0.2rem;
  padding-left: 0.3rem;
  height: 0.6rem;
  width: 100%;
  line-height: 0.6rem;
  box-sizing: border-box;
}
.img {
  width: 0.6rem;
  height: 0.6rem;
}
.ggname {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 40%;
  box-sizing: border-box;
  font-size: 0.3rem;
}
.choose-small {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 4rem;
  height: 4rem;
  background: #fff;
}
.choose {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.3); */
  /* border: 1px solid #000; */
  /* opacity: 0.7; */
  z-index: 1006;
}
.Mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.carcar {
  max-height: 400px;
  overflow-y: auto;
}
.youbufen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jiaqiann {
  float: left;
  padding-right: 0.4rem;
}
.zhii {
  float: right;
  font-size: 0.3rem;
  padding-right: 0.4rem;
  padding-left: 0.4rem;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
}
.jiaa {
  float: right;
  color: #fff;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.3rem;
  background: #3190e8;
  border-radius: 50%;
}
.jiann {
  float: left;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.3rem;
  border: 1px solid #3190e8;
  border-radius: 50%;
}
.car-small {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  box-sizing: border-box;
}
.shopCar {
  /* padding-bottom: 2rem; */
  position: fixed;
  z-index: 99999999999999;
  bottom: 0.8rem;
  /* height: rem; */
  left: 0;
  /* margin-top: -1.8rem; */
  z-index: 2000;
  width: 100%;
  overflow: auto;
  font-size: 0.3rem;
  background: #fff;
  text-align: center;
}
.gwc {
  width: 100%;
  background-color: #eceff1;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  box-sizing: border-box;
}
.shopCar img {
  width: 0.4rem;
  height: 0.4rem;
  vertical-align: middle;
}
.teshushi {
  position: absolute;
  left: 10%;
  top: -0.4rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  text-align: center;
  border: 0.06rem solid #444;
  background: #3190e8 !important;
}
.red {
  width: 0.3rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.2rem;
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  color: #fff;
  border-radius: 50%;
}
.green {
  color: #fff !important;
  background: #4cd964 !important;
}
.fadee-enter {
  opacity: 0.1;
  margin-left: 1rem;
  /* background-color: green; */
}
.fadee-enter-active {
  transition: all 0.3s linear;
}
.fadee-enter-to {
  opacity: 0.7;
  /* background-color: red; */
}
.fadee-leave {
  opacity: 0.9;
  /* background-color: red; */
  font-size: 50px;
}
.fadee-leave-active {
  transition: all 0.3s linear;
}
.fadee-leave-to {
  margin-left: 1rem;
  opacity: 0.1;
  /* background-color: palegreen; */
  font-size: 10px;
}
.zhaopai1 {
  position: absolute;
  right: 10%;
  top: 10%;
  color: rgb(240, 115, 115);
  border: 1px solid #000;
  border-color: rgb(240, 115, 115);
  border-radius: 10px;
}
.guige {
  width: 1rem !important;
  height: 0.5rem !important;
  text-align: center;
  font-size: 0.3rem;
  line-height: 0.5rem !important;
  color: #fff;
  background-color: #3190e8;
  border: 1px solid #3190e8;
  border-radius: 0.2rem !important;
  bottom: 8% !important;
}
.youhui {
  display: inline-block;
  color: rgb(241, 136, 79);
  border-radius: 10px;
  border: 1px solid #000;
  border-color: rgb(240, 115, 115);
}
.blue {
  background: #fff;
  border-left: 2px solid #3190e8;
  width: 100%;
  height: 1.6rem;
  text-align: center;
  line-height: 1.6rem;
  font-size: 0.26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0.1rem;
  box-sizing: border-box;
}
.xin {
  position: absolute;
  left: 0;
  top: 5px;
  z-index: 100;
  transform: rotate(135deg);
  color: #fff;
}
.xinjiao {
  position: absolute;
  top: -0px;
  left: -14px;
  width: 0;
  height: 0;
  border: 20px solid #000;
  border-color: #4cd964 transparent transparent transparent;
  z-index: -1;
  /* transform: rotateZ(-135deg); */
}
.panduan {
  position: absolute;
  bottom: 0%;
  right: 2%;
  width: 2rem;
  height: 0.8rem;
  line-height: 0.8rem;
}
.zhi {
  position: absolute;
  left: 40%;
  float: right;
  font-size: 0.3rem;
  padding-right: 0.4rem;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
}
.jia {
  float: right;
  color: #fff;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.3rem;
  background: #3190e8;
  border-radius: 50%;
}
.jian {
  float: left;
  position: absolute;
  color: #3190e8;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.3rem;
  border: 1px solid #3190e8;
  border-radius: 50%;
}
.qisong {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #535356;
  width: 2.4rem;
  height: 100%;
  line-height: 0.8rem;
  text-align: center;
}
.peisong {
  font-size: 0.16rem;
}
.footer-left {
  width: 50%;
  box-sizing: border-box;
  padding-left: 30%;
  font-size: 0.3rem;
  color: #fff;
  font-weight: 700;
  line-height: 0.4rem;
}
.gouwuche {
  position: absolute;
  z-index: 9999;
  left: 10%;
  top: -0.4rem;
  width: 1rem;
  height: 1rem;
  background-color: #535356;
  border-radius: 50%;
  text-align: center;
  border: 0.06rem solid #444;
}
.gouwuche img {
  width: 0 0.6rem;
  height: 0.6rem;
}
.teshushi img {
  width: 0 0.6rem;
  height: 0.6rem;
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #333;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  z-index: 9999999999999999 !important;
}
.xuan {
  font-size: 0.2rem !important;
  color: #666;
  font-weight: 400;
}
.priec {
  color: #f60;
  font-size: 0.2rem;
  line-height: 0.8rem;
}
.priec span {
  font-size: 0.4rem;
  font-weight: 700;
}
.tes {
  font-size: 0.24rem !important;
  color: #666 !important;
}
.box-haoping {
  font-size: 0.24rem;
  line-height: 0.4rem;
}
* {
  margin: 0;
  padding: 0;
}
.right-left {
  width: 30%;
  height: 100%;
  padding-left: 0.3rem;
  box-sizing: border-box;
  float: left;
}
.right-left img {
  width: 1rem;
  height: 1rem;
  padding-top: 0.3rem;
}
.right-right {
  transition: all 2s linear;
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
  padding-top: 0.24rem;
}
.box-pingjia {
  font-size: 0.22rem;
  color: #999;
  line-height: 0.4rem;
}
.box-title {
  font-size: 0.32rem;
  font-weight: 600;
  line-height: 0.4rem;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  box-sizing: border-box;
  background: #fff;
  z-index: 999;
}
header p {
  font-size: 0.36rem;
}
.lan {
  color: #3190e8;
  border-bottom: 2px solid #3190e8;
}
main {
  width: 100%;
  height: 100%;
  /* flex: 1; */
  margin-top: 1rem;
  display: flex;
  background: #f3f3f3;
}
.mainleft {
  width: 20%;
  height: 42rem;
  overflow: auto;
  background: #f3f3f3;
}
.mainright {
  transition: all 2s linear;
  width: 100%;
  overflow: auto;
  height: 42rem;
}
.left-nr {
  position: relative;
  z-index: 980;
  width: 100%;
  height: 1.6rem;
  text-align: center;
  line-height: 1.6rem;
  font-size: 0.26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0.1rem;
  box-sizing: border-box;
}
.right-nr {
  transition: all 2s linear;
  width: 100%;
  font-size: 0.2rem;
  box-sizing: border-box;
  background: #fff;
}
.title {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  background: #f3f3f3;
  box-sizing: border-box;
  padding-left: 0.3rem;
  color: #666;
}
.title span {
  font-weight: 700;
  font-size: 0.36rem;
}
.right-nr-bottom {
  position: relative;
  width: 100%;
  height: 2.8rem;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
<script>
import { getgoumai } from "../../api/index.js";
// import jq from "jquery";

export default {
  data() {
    return {
      arr: [],
      bool: true,
      src: "http://elm.cangdu.org/img/",
      price: 0.0,
      cha: 20,
      indexx: 0,
      arrNew: [],
      arrPrice: [],
      bool1: true,
      n: 0,
      arrShu: [],
      // arrshopcar: [],
      BOol: false,
      xingouwuche: [],
      lengthshu: "",
      arrPrice1: [],
      bool2: false,
      guige: [],
      bool3: false,
      inndex: 0,
      guiguige: "",
      boool3: false,
    };
  },
  async mounted() {
    // var regq = await getgoumai(this.$route.query.shuzu);
    // if (regq.data) {
    //   this.arr = regq.data;
    // }
    // if (this.arr.indexOf(JSON.parse(localStorage.arrw)) == -1) {
    //   localStorage.arrw = JSON.stringify(this.arr);
    // } else {
    //   localStorage.removeItem("arrw");
    //   localStorage.removeItem("arrww");
    // }
    // this.shuzu = this.$route.query.shuzu;
    // this.jige = this.$route.query.jige;
    /* 数据渲染页面 */
    var reg = await getgoumai(this.$route.query.shuzu);
    if (reg.data) {
      this.arr = reg.data;
      localStorage.arrw = JSON.stringify(this.arr);
    }
    /* 把渲染值存到浏览器储存 */
    if (localStorage.arrww) {
      this.arr = JSON.parse(localStorage.arrww);
      // this.arrshopcar = JSON.parse(localStorage.arrw);
      this.arr.forEach((item) => {
        this.xingouwuche.push(item.foods);
      });
      // if (this.xingouwuche > 0) {
      this.xingouwuche = this.xingouwuche.reduce(function (a, b) {
        return a.concat(b);
      });
      var arr = [];
      this.arrPrice = this.arr;
      this.arrPrice.forEach((items) => {
        arr.push(items.foods);
      });
      if (arr.length > 0) {
        arr = arr.reduce(function (a, b) {
          return a.concat(b);
        });
      }
      var sum = 0;
      arr.forEach((items) => {
        sum += items.is_featured * items.specfoods[0].price;
      });
      var sum1 = 0;
      arr.forEach((item) => {
        sum1 += item.is_featured;
        // if(sum1>0){
        //   this.BOol = true
        // }
      });
      this.price = sum;
      this.n = sum1;
    } else {
      localStorage.arrww = this.arr;
      this.arr.forEach((item) => {
        this.xingouwuche.push(item.foods);
      });
    }
  },
  methods: {
    // /* 滚动条 */
    moveFoodsWrapper(index) {
      this.indexx = index;
      var h = this.$refs.ntmd[index].offsetTop;
      this.indexx = index;
      this.$refs.nmmd.scrollTop = 0;
      // jq(".mainright").animate({ scrollTop: h }, 300);
      if (index != 0) {
        this.$refs.nmmd.scrollTop = h - 40;
      }
      setTimeout(() => {
        // this.$refs.tmmd.addEventListener("scroll", this.scrollHad);
      }, 360);
    },
    /* 返回 */
    Return() {
      this.$router.go(-1);
    },
    /* 加 */
    jia(item, index) {
      this.arr.forEach((item) => {
        this.xingouwuche.push(item.foods);
      });
      // var sum = 0;
      var n = 0;
      // this.xingouwuche[index].is_featured++;
      item.is_featured++;
      /* 判断价钱是否能够起送 */
      if (this.cha > this.price) {
        this.bool1 = true;
      } else {
        this.bool1 = false;
      }
      /* 计算总价格 */
      /* 第一步获得循环获得第一层数组 */
      var arr = [];
      this.arrPrice = this.arr;
      this.arrPrice.forEach((items) => {
        arr.push(items.foods);
      });
      if (arr.length > 0) {
        arr = arr.reduce(function (a, b) {
          return a.concat(b);
        });
      }
      /* 第二部写一个计算方法 */
      var sum = 0;
      arr.forEach((items) => {
        sum += items.is_featured * items.specfoods[0].price;
      });
      var sum1 = 0;
      arr.forEach((item) => {
        sum1 += item.is_featured;
      });
      /* 第三把把计算的值取出来 */
      this.price = sum;
      this.n = sum1;
      localStorage.arrww = JSON.stringify(this.arr);
    },
    /* 减 */
    jian(item, index) {
      // this.xingouwuche[index].is_featured--;
      item.is_featured--;
      /* 判断价钱是否能够起送 */
      if (this.cha > this.price) {
        this.bool1 = true;
      } else {
        this.bool1 = false;
      }
      /* 计算总价格 */
      /* 第一步获得循环获得第一层数组 */
      var arr = [];
      this.arrPrice = this.arr;
      this.arrPrice.forEach((items) => {
        arr.push(items.foods);
      });
      if (arr.length > 0) {
        arr = arr.reduce(function (a, b) {
          return a.concat(b);
        });
      }
      /* 第二部写一个计算方法 */
      var sum = 0;
      arr.forEach((items) => {
        sum += items.is_featured * items.specfoods[0].price;
      });
      var sum1 = 0;
      arr.forEach((item) => {
        sum1 += item.is_featured;
      });
      if (sum1 == 0) {
        this.BOol = false;
        this.bool2 = false;
      }
      /* 第三把把计算的值取出来 */
      this.price = sum;
      this.n = sum1;
      localStorage.arrww = JSON.stringify(this.arr);
    },
    /* 结算 */
    settlement() {
      this.BOol = !this.BOol;
      this.bool2 = !this.bool2;
    },
    /* 滚动事件 */
    scrollHad() {},
    /* 滑动事件 */
    huadong() {
      // var arr = []
      // this.arr.forEach(item=>{
      // })
      // console.log(arr)
      // console.log(this.$refs.nmmd.scrollTop);
      //  this.$refs.nmmd.scrollTop
    },
    /* 选规格 */
    specification(item) {
      // if (this.guige.indexOf(item) == -1) {
      this.guige.push(item);
      // }
      this.bool3 = true;
      this.boool3 = true;
      // console.log(this.guige);
    },
    /* 规格选择 */
    // guige(ite, index) {
    //   this.inndex = index;
    // },
    /* 消失 */
    xiaoshi() {
      this.bool3 = false;
      this.boool3 = false;
    },
    /* 选规格中设置边框颜色 */
    gggg(ite, index) {
      this.inndex = index;
      // this.guiguige = ite;
      // console.log(ite);
    },
    /* 加入购物车事件 */
    addshopcar(value, index) {
      // console.log(value);
      // value.specifications[0].values = this.guiguige
      // console.log(value.specifications[0].values);
      value.is_featured++;
      setTimeout(() => {
        this.bool3 = false;
        this.boool3 = false;
      }, 300);
      /* 添加购物车后重新渲染部分数据 */
      var arr = [];
      this.arrPrice = this.arr;
      this.arrPrice.forEach((items) => {
        arr.push(items.foods);
      });
      if (arr.length > 0) {
        arr = arr.reduce(function (a, b) {
          return a.concat(b);
        });
      }
      var sum = 0;
      arr.forEach((items) => {
        sum += items.is_featured * items.specfoods[0].price;
      });
      var sum1 = 0;
      arr.forEach((item) => {
        sum1 += item.is_featured;
        // if(sum1>0){
        //   this.BOol = true
        // }
      });
      this.price = sum;
      this.n = sum1;
    },
    /* 清空 */
    async DelectAll() {
      this.xingouwuche = [];
      var reg = await getgoumai(this.$route.query.shuzu);
      if (reg.data) {
        this.arr = reg.data;
      }
      var arr = [];
      this.arrPrice = this.arr;
      this.arrPrice.forEach((items) => {
        arr.push(items.foods);
      });
      if (arr.length > 0) {
        arr = arr.reduce(function (a, b) {
          return a.concat(b);
        });
      }
      var sum = 0;
      arr.forEach((items) => {
        sum += items.is_featured * items.specfoods[0].price;
      });
      var sum1 = 0;
      arr.forEach((item) => {
        sum1 += item.is_featured;
        // if(sum1>0){
        //   this.BOol = true
        // }
      });
      this.price = sum;
      this.n = sum1;
    },
  },
  computed: {},
};
</script>
